<template>
  <div class="TInputNumber">
    <el-tooltip :content="message" :disabled="disabled" placement="top" :hide-after="0" trigger="manual">
      <el-input-number
        v-bind="$attrs"
        v-model="innerValue"
        :size="size"
        label="描述文字"
        @focus="handleFocus"
      ></el-input-number>
    </el-tooltip>
  </div>
</template>

<script>
import vModelMixin from "@/mixin/v-model";
export default {
  name: "TInputNumber",
  mixins: [vModelMixin],
  props: {
    value: {
      type: Number,
      require: false,
      default: undefined,
    },
    size: {
      type: String,
      require: false,
      default: "small",
    },
    rules: {
      type: Array,
      require: false,
      default: () => [],
    },
  },
  data() {
    return {
      show: true,
      message: "",
      disabled: true,
    };
  },
  methods: {
    handleFocus() {
      const len = this.rules.length;
      if (Array.isArray(this.rules) && len > 0) {
        for (let i = 0; i < len; i++) {
          const { methods, message } = this.rules[i];
          if (methods(this.innerValue)) {
            this.message = message;
            this.disabled = false;
            return;
          }
        }
      }
      this.message = "";
      this.disabled = true;
    },
  },
};
</script>

<style scoped lang="scss">
.TInputNumber {
  :deep(.el-input-number--mini) {
    line-height: 24px;

    .el-input--mini .el-input__inner {
      height: 24px;
      line-height: 24px;
    }

    .el-input-number__decrease,
    .el-input-number__increase {
      line-height: 22px;
    }
  }

  :deep(.el-input-number) {
    width: 80px;
    margin-right: 40px;
    margin-left: 40px;
  }

  :deep(.el-input-number__decrease),
  :deep(.el-input-number__increase),
  :deep(.el-input__inner) {
    border: 1px solid #bac3d3;
    border-radius: 3px;
  }

  :deep(.el-input-number__decrease):hover,
  :deep(.el-input-number__increase):hover,
  :deep(.el-input__inner):hover,
  :deep(.el-input-number__decrease):focus,
  :deep(.el-input-number__increase):focus,
  :deep(.el-input__inner):focus,
  :deep(.el-input-number__decrease):visited,
  :deep(.el-input-number__increase):visited,
  :deep(.el-input__inner):visited {
    border: 1px solid #1d7ff2;
  }

  :deep(.el-input-number__decrease) {
    left: -40px;
  }

  :deep(.el-input-number__increase) {
    right: -40px;
  }
}
</style>
